<template>
	<!-- 顶部导航栏 -->
	<view class="topBar">
		<itemNavVue title="商品详情"></itemNavVue>
		<!-- 占位符 -->
		<view class="blank">
		</view>
	</view>

	<!-- 显示商品大图区域 -->
	<view class="img_show">
		<swiper class="swiper" circular :indicator-dots="indicatorDots">
			<swiper-item v-for="(item,index) in getitemImg" :key="index">
				<view class="swiper-item">
					<!-- :src="`http://${item.image_url}`" -->
					<!-- <image class="com_img" :src="`http://${item.img_url_webp}`" mode=""></image> -->
					<image class="com_img" :src="`http://${item.img_url}`" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>

	<!-- 显示商品信息区域 -->
	<!-- 价格、文字、商品介绍 -->
	<view class="item_introduction">
		<!-- 信息 -->
		<view class="item_titANDprice">
			<text class="item_intro_title">{{product_info.title}}</text>
			<text class="item_price">￥{{topprice}}</text>
		</view>
		<text class="item_intro">{{product_info.keywords}}</text>
	</view>

	<!-- 加入购物车、联系商家、立即购买-->
	<view class="add_">
		<!-- 加入购物车 -->
		<view class="addcar">
			<image src="../../static/ic_加入购物车.png" mode=""></image>
			<text>加入购物车</text>
		</view>
		<!-- 联系商家 -->
		<view class="cont">
			<image src="../../static/联系商家 (1).png" mode=""></image>
			<text>联系商家</text>
		</view>
		<!-- 立即购买 -->
		<view class="buyNow" @click="buyNow">
			<text>立即购买</text>
		</view>
	</view>

	<!-- 其他信息 -->
	<cardVue cardTitle="产品优势"></cardVue>
	<view class="text_intro">
		<view class="text_" v-for="(item,index) in pro_info2" :key="index">
			{{item}}
		</view>
	</view>
	<cardVue cardTitle="详情"></cardVue>

	<view class="pre">
		<view class="preImage" v-for="(item,index) in com_datas">
			<image class="com_img" :src="`http://${item.img_url_webp}`" mode=""></image>
		</view>
	</view>

	<!-- 商品评论 -->
	<cardVue cardTitle="热门评论"></cardVue>
	<view class="comments">
		<view class="show_more">
			<button class="more_btn">查看更多>></button>
		</view>
		<!-- 评论展示区 -->
		<view class="com_area" v-for="(item,index) in comment" :key="index">
			<!-- 头像、评论 -->
			<view class="com_top">
				<view class="author">
					<image :src="`${item.user_avatar}`" mode=""></image>
				</view>
				<view class="com_text">
					{{item.comment_content}}
				</view>
			</view>
			<!-- 日期、图片 -->
			<view class="com_body">
				<view class="com_Data">
					<text>
						{{item.user_name}}
					</text>
					<text>
						{{item.add_time}}
					</text>
				</view>
				<!-- 图片 -->
				<view class="com_imgs">
					<image v-for="(item2,index2) in item.comment_images" :key="index2" :src="`${item2}`" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
	<!-- 为你推荐 -->
	<cardVue cardTitle="为你推荐"></cardVue>
	<view class="recommend_foryou">
		<view class="recommend_item" v-for="(item,index) in recom_you" :key="index" @click="toitem(item.product_id)">
			<image class="recom_img" :src="`${item.image_url}`" mode=""></image>
			<text class="recom_name">{{item.name}}</text>
			<text class="recom_price">{{item.market_price}}</text>
		</view>
	</view>


	<!-- 选择规格界面 -->
	<view class="filler_buy" :style="{ bottom: bottomPosition + 'rpx' }">
		<button class="blank2" plain="true" @click="close_buy"></button>
		<view class="fill">
			<view class="close_filler">
				<button @click="close_buy"></button>
			</view>
			<view class="fill_items" v-for="(item,index) in product_num">
				<text>{{item.name}}</text>

				<button v-for="(item1,index1) in item.list" :key="index1"
					@click="additems(item.name,index,item1.name,index1,item1.price)" :class="{ active: item1.active }">
					{{item1.name}}
				</button>
			</view>
		</view>
		<view class="information">
			<view class="choose_now">
				当前选择：
				<text v-for="(item,index) in nameindex" :key="index" v-if="nameindex">
					{{item.name2}} &nbsp;</text>
				<text class="choose_price" v-if="price1">{{price1}}</text>
			</view>
			<view class="button_s">
				<button class="item_add_acr" @click="addcars">加入购物车</button>
				<button class="item_buy_now">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import itemNavVue from '@/components/items/itemNav.vue';
	import cardVue from '@/components/common/card.vue';
	import {
		getHomeComd
	} from "@/api/request.js"
	export default {
		props: {
			itemId: String,
			Itemprice: String
		},
		components: {
			itemNavVue,
			cardVue
		},
		data() {
			return {
				//选择规格
				price1: "",
				// 初始位置
				bottomPosition: -1200,
				indicatorDots: true,
				item_id: "",
				item_price: "",
				nameindex: [],
				mydata: [],
				datas: [],
				// 商品大图
				com_datas: [],
				// 具体商品图
				getitemImg: [],
				// 获取产品信息
				product_info: [],
				// 价格
				topprice: "",
				// 商品信息2
				pro_info2: [],
				// 热门评论
				comment: [],
				// 为你推荐
				recom_you: [],
				// 获取筛选商品参数
				product_num: [],

				// 实现sku
				// 定义一个变量，用来更新/储存idnex1
				choose1: [],
				// 定义一个变量，用来更新/存储idnex2,
				choose2: [],

				// 记录数据
				old_price: "",
				
				//记录将要传递的数据
				pro_duct:[],
			}
		},
		methods: {
			// 异步获取数据
			async getdata() {
				try {
					console.log("id", this.item_id)
					this.mydata = await getHomeComd({
						commodity_id: this.item_id
					});
					this.datas = this.mydata.data;
					// 获取商品大图
					this.com_datas = this.mydata.data.goods_share_datas.gallery_view;
					// 获取具体商品的图
					this.getitemImg = this.mydata.data.goods_info;
					// 获取产品信息
					this.product_info = this.mydata.data.seo;
					// 获取价格
					this.topprice = this.datas.goods_info[0].market_price;
					// 获取商品信息2
					this.pro_info2 = this.mydata.data.product_info.sell_point_desc;
					// 获取评论
					this.comment = this.mydata.data.goods_share_datas.comments.list;
					// 为你推荐
					this.recom_you = this.mydata.data.related_recommend.data;
					// 产品参数
					this.product_num = this.mydata.data.buy_option;
					// console.log("商品详情页数据", this.mydata)
					// console.log("获取产品信息", this.product_info);
					// console.log("获取商品信息2", this.pro_info2);
					// console.log("为你推荐", this.recom_you);
					// console.log("获取评论", this.comment);
					console.log("获取产品参数", this.product_num);
					console.log("获取数据datas=>", this.datas);
					// console.log("获取商品大图", this.com_datas)


				} catch (error) {
					console.log("error", error)
				}

			},

			// 推荐页面跳转
			toitem(id) {
				console.log("id=>");
				uni.navigateTo({
					url: `/pages/items/items?itemId=${encodeURIComponent(id)}`
				})
			},
			// 点击立即购买
			buyNow() {
				this.bottomPosition = 0;
				// 修改规格的位置
			},
			// 点击关闭规格栏
			close_buy() {
				this.bottomPosition = -1200;
			},
			// 实现sku
			additems(name1, index1, name2, index2, itemprice) {
				// 排他逻辑
				this.product_num[index1].list.forEach((item, idx) => {
					item.active = idx === index2;
				});

				// 修补数据
				// 如果存在数据，则记录该数据
				// if (itemprice) {
				// 	this.old_price = itemprice;
				// 	// 赋值
				// 	this.price1 = this.old_price;
				// }
				// if (!itemprice && this.old_price == undefined) {
				// 	itemprice = this.item_price;
				// 	this.price1 = itemprice;
				// }

				if (!itemprice) {
					itemprice = this.item_price;
				}
				// 存在价格数据，则使用变量存储该数据
				else {
					let price2 = itemprice;
					// 赋值
					this.price1 = itemprice;
				}
				// 判断是否选中了所有必选的选项
				if (name1 && name2 && itemprice) {
					let found = false;

					// 先遍历数组，查看是否有相同的对象，然后再进行数组的插入
					for (let k = 0; k < this.nameindex.length; k++) {
						if (this.nameindex[k].name1 === name1 || this.nameindex[k].name2 === name2) {
							// 替换掉对应位置的name1以及name2
							this.nameindex[k] = {
								name1,
								name2,
							};
							found = true;
							break;
						}
					}
					// 如果没有找到相同的数据，则添加新数据
					if (!found) {
						this.nameindex.push({
							name1,
							name2
						});
					}

					// 测试
					console.log("this.nameindex", this.nameindex);
				}

				console.log(name1, index1, name2, index2, itemprice);
				
				this.pro_duct=[name1, index1, name2, index2, itemprice];
				
			},

			// 加入购物车
			addcars() {
				console.log("加入购物车");

				// 假设商品数据如下
				const newProduct = [
					"product_image_url", // 图片URL
					19.99, // 价格
					"12345", // 商品ID
					"商品名称", // 商品名称
					"规格信息" // 商品规格
				];

				// 从本地存储中获取 product 数组
				let productArray = uni.getStorageSync('product');

				if (productArray) {
					// 如果存在，则将新商品数据插入到数组的首部
					productArray.unshift(newProduct);
				} else {
					// 如果不存在，则创建一个新的二维数组 product，并将数据插入
					productArray = [newProduct];
				}

				// 将更新后的数组保存回本地存储
				uni.setStorageSync('product', productArray);

				console.log("更新后的 product 数组:", productArray);
			}
		},

		onLoad(options) {
			// 显示加载框
			uni.showLoading({
				title: '加载中'
			});

			// 获取ID
			this.item_id = decodeURIComponent(options.itemId);
			this.item_price = decodeURIComponent(options.Itemprice);
			console.log(this.item_id);
			console.log(this.item_price);

			// 异步请求数据
			this.getdata().then(() => {
				// 数据请求完成后隐藏加载框
				uni.hideLoading();
			}).catch((error) => {
				console.error('请求数据失败:', error);
				uni.hideLoading();
			});
		}
	}
</script>

<style scoped>
	.active {
		background-color: #ff3535;
		color: white;
	}


	.topBar {
		z-index: 1000;
	}

	.blank {
		height: 81px;
		background-color: transparent;
		width: 100%;
	}

	.img_show {
		width: 100%;
		height: 790rpx;
		z-index: 1;
	}

	.swiper {
		height: 790rpx;
	}

	.com_img {
		width: 100%;
		height: 790rpx;
		display: block;
		object-fit: cover;
	}

	/* 商品信息 */
	.item_introduction {
		padding: 0 20rpx;
		position: relative;
		display: block;
		height: 220rpx;
		overflow: hidden;
		border-top: 1px solid #cfcfcf;
		border-bottom: 1px solid #cfcfcf;
	}

	.item_titANDprice {
		display: block;
		position: relative;
	}

	.item_intro_title {
		font-size: 20px;
		display: inline-block;
		position: relative;
	}

	/* 价格 */
	.item_price {
		display: block;
		position: relative;
		margin-left: 500rpx;
		right: 0;
		font-size: 23px;
		font-weight: bold;
		color: #ff6b21
	}

	.item_intro {
		position: absolute;
	}

	.addcar text,
	.cont text,
	.buyNow text {
		line-height: 90rpx;
		display: inline-block;
		margin-left: 12rpx;
	}

	.addcar image,
	.cont image {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		position: relative;
		vertical-align: middle;
	}

	.addcar image {
		margin-left: 12rpx;
	}

	.add_ {
		position: relative;
		display: flex;
		width: 750rpx;
		height: 90rpx;
		border: 1px solid #d2d2d5;
	}

	.addcar {
		background-color: #ff5218;
		width: 260rpx;
		color: white;
		font-weight: bold;
	}

	.addcar:hover {
		background-color: #ff6b21;
	}

	.addcar,
	.cont,
	.buyNow {
		position: relative;
		height: 90rpx;
	}

	.buyNow {
		display: inline-block;
		position: absolute;
		right: 0rpx;
		width: 230rpx;
		text-align: center;
		background-color: #ff3535;
		font-weight: bold;
		color: white;
		border-radius: 0rpx;
	}

	.buyNow:hover {
		background-color: #ff6b21;
	}

	.cont {
		width: 200rpx;
		margin-left: 30rpx;
	}

	.text_intro {
		position: relative;
		width: 100%;
		height: 400rpx;
		font-size: 14rpx;
		overflow: hidden;
		border-top: 1px solid #cfcfcf;
	}

	.text_ {
		color: #727273;
		border-bottom: 1px solid #cfcfcf;
		padding-top: 28rpx;
		font-size: 12px;
		text-align: left;
		justify-content: center;
	}

	/* 各种优惠 */
	.pre {
		position: relative;
		width: 100%;
		padding: 20rpx 0;
	}

	.preImage {
		width: 100%;
		height: auto;
		border: 1px solid #cfcfcf;
	}

	.preImage image {
		width: 100%;
	}

	.recommend_foryou {
		width: 100%;
		display: flex;
		position: relative;
		flex-wrap: wrap;
		/* 允许子元素换行 */
		justify-content: space-between;
		/* 子元素之间等间距 */
	}

	.recommend_item {
		width: 50%;
		height: auto;
		flex-flow: 1;
		text-align: center;
	}

	.recommend_item image {
		width: 100%;
		object-fit: fill;

	}

	.recommend_item text {
		display: block;
	}

	.recom_price {
		display: block;
		font-size: 18px;
		width: auto;
		color: #ff3535;
	}

	/* 热门评论 */
	.comments {
		width: 100%;
		height: 500rpx;
		border: 1px solid #a2a2a2;
		overflow: scroll;
	}

	.show_more {
		position: relative;
	}

	.more_btn {
		position: absolute;
		right: 0;
		width: 300rpx;
		height: 60rpx;
		font-size: 12px;
		line-height: 60rpx;
		background-color: transparent;
	}

	.com_area {
		width: 100%;
		height: 240rpx;
		margin-top: 60rpx;
	}

	/* 头像、文字 */
	.com_top {
		display: flex;
	}

	.author {
		flex-grow: 1;
		width: 180rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.author image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.com_text {
		flex-grow: 1;
		width: 600rpx;
		height: 90rpx;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.com_body {
		display: flex;
	}

	.com_Data {
		display: inline;
		flex-grow: 1;
	}

	.com_Data text {
		display: block;
		width: 200rpx;
		font-size: 12px;
		color: #727273;
		margin: 4rpx 0;
	}

	.com_imgs {
		width: 600rpx;
		height: 100rpx;
		overflow: hidden;
		display: inline;
	}

	.com_imgs image {
		width: 100rpx;
		height: 100rpx;
		margin: 0 8rpx;
	}

	/*选择规格 */
	.filler_buy {
		display: block;
		position: fixed;
		width: 100%;
		height: 1200rpx;
		bottom: -600rpx;
		transition: bottom 0.3s ease;
		z-index: 1000 !important;
		/* 过渡*/
	}

	.fill {
		height: 430rpx;
		overflow: scroll;
		background-color: white;
		outline: none;
	}

	.close_filler {
		width: 100%;
		height: 60rpx;
		position: absolute;
		z-index: 100;
	}

	.close_filler button {
		width: 60rpx;
		height: 60rpx;
		background-image: url(../../static/取消.png);
		background-size: cover;
		background-color: transparent;
		position: absolute;
		right: 0;
		margin-right: 20rpx;
	}

	.fill_items {
		margin: 10rpx 0;
		margin-left: 12rpx;
		flex-wrap: wrap;
	}

	.fill_items text {
		position: relative;
		display: block;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
	}

	.fill_items button {
		overflow: clip;
		height: 80rpx;
		padding: 0 20rpx;
		display: inline-block;
	}

	.information {
		bottom: 0;
		width: 100%;
		height: 170rpx;
		border: 1px solid #b5b5b5;
		background-color: white;
	}

	.blank2 {
		height: 600rpx;
		border: 0;
		background-color: transparent;
	}

	.choose_now {
		display: block;
		margin-left: 20rpx;
	}

	.button_s {
		margin-top: 12rpx;
		width: 100vw;
		cursor: pointer;
		display: flex;
	}

	.button_s button {
		justify-content: center;
		display: inline-flex;
		width: 50%;
		flex-grow: 1;
		margin: 0 20rpx;
	}

	.item_add_acr {
		background-color: #ff5218;
		color: white;
	}

	.item_add_acr:active {
		background-color: #ff0000;
	}

	.item_buy_now {
		color: white;
		background-color: #ff7d26;
	}

	.item_buy_now:active {
		background-color: #ff0000;
	}
</style>